import { ScrollView, StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { getTheme } from '../../theme';
import { Header } from './components/header';
import { Carousel } from './components/carousel';
import { Actions } from './components/actions';
import { Recommend } from './components/recommend';
import { Lovely } from './components/lovely';
import { px2dp } from '../../utils/pixel-adapter';
import { Player } from '../../components/player';


export function Home(props) {
    return (
        <View style={styles.container}>
            <SafeAreaView style={{ flex: 1 }} edges={['top']}>
                <Header />
                <ScrollView style={styles.scorlllBox}>
                    <Carousel />
                    <Actions />
                    <Recommend style={styles.recommend} />
                    <Lovely style={styles.lovely} />
                    <View style={{ height: px2dp(30) }} />
                </ScrollView>
                <Player />
            </SafeAreaView>
        </View>
    );
}

const theme = getTheme();


const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: '100%',
        backgroundColor: theme.mainColor,
    },
    scorlllBox: {
        padding: 15,
        flex: 1,
    },
    recommend: {
        marginTop: px2dp(30),
    },
    lovely: {
        marginTop: px2dp(40),
    }
});